<template>
	<div class="box">
		<div class="title">合同</div>
		<div class="container">
			<div class="item">
				<div class="label">租赁合同模板</div>
				<div class="content">
					<el-button
						v-if="
							formData.leaseContract &&
							formData.leaseContract.contractTemplateName
						"
						type="text"
						@click="
							handleSeeContractContent(
								formData.leaseContract.contractTemplateId,
							)
						">
						{{
							formData.leaseContract
								| _getChain('contractTemplateName')
						}}
					</el-button>
					<el-button
						type="text"
						v-if="
							formData.leaseContract &&
							formData.leaseContract.contractTemplateId &&
							formData.leaseContract.contractTemplateId !== -1
						"
						@click="downTemplate(formData.leaseContract)">
						下载
					</el-button>
				</div>
			</div>

			<div class="item" v-if="formData.rentType_raw == '2'">
				<div class="label">买卖合同模板</div>
				<div class="content">
					<el-button
						type="text"
						@click="
							handleSeeContractContent(
								formData.salesContract.contractTemplateId,
							)
						">
						{{
							formData.salesContract
								| _getChain('contractTemplateName')
						}}
					</el-button>
					<el-button
						type="text"
						v-if="
							formData.salesContract &&
							formData.salesContract.contractTemplateId &&
							formData.salesContract.contractTemplateId !== -1
						"
						@click="downTemplate(formData.salesContract)">
						下载
					</el-button>
				</div>
			</div>
			<div class="item">
				<div class="label">担保合同模板</div>
				<div class="content">
					<el-button
						type="text"
						@click="
							handleSeeContractContent(
								formData.guaranteeContract.contractTemplateId,
							)
						">
						{{
							formData.guaranteeContract
								| _getChain('contractTemplateName')
						}}
					</el-button>

					<el-button
						type="text"
						v-if="
							formData.guaranteeContract &&
							formData.guaranteeContract.contractTemplateId &&
							formData.guaranteeContract.contractTemplateId !== -1
						"
						@click="downTemplate(formData.guaranteeContract)">
						下载
					</el-button>
				</div>
			</div>
		</div>
		<common-contract-content
			ref="commonContractContent"></common-contract-content>
	</div>
</template>

<script>
	import FormItems from '@/views/finance/manage/formItems/index.vue';
	import FormItem from '@/views/finance/reimburs/formItem/index.vue';
	import CommonContractContent from '@/views/contractTemplate/components/CommonContractContent.vue';
	import { downloadContractTemplate } from '@/api/contractTemplate/templateUpdate.js';
	export default {
		components: { FormItems, FormItem, CommonContractContent },
		dicts: [],
		props: {
			value: {
				required: false,
			},
			state: {
				required: false,
			},
		},
		data() {
			return {
				// formList: [],
			};
		},
		computed: {
			formData: {
				get() {
					return this.value;
				},
				set(val) {
					this.$emit('input', val);
				},
			},
		},
		created() {
			// this.initFormList();
		},
		mounted() {},
		methods: {
			handleSeeContractContent(id) {
				if (!this.isNull(id)) {
					this.$refs.commonContractContent.show(id);
				} else {
					this.$message.error('模版id为空,无法查看');
				}
			},
			downTemplate(row) {
				if (this.notEmpty(row?.contractTemplateId)) {
					this.$download.contractTemplate(row?.contractTemplateId);
				} else {
					this.$message.error('模版id为空,无法下载');
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.box {
		margin: 20px;
		padding: 20px;
		border-radius: 8px;
		background-color: #fff;
		.title {
			font-size: 16px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 22px;
			padding-bottom: 15px;
			border-bottom: 1px solid #e9e9e9;
			margin-bottom: 15px;
		}
	}
	.item {
		display: flex;
		margin: 15px 0;
		align-items: center;
		.label {
			width: 100px;
			padding-right: 15px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 14px;
			color: #8c8c8c;
			line-height: 20px;
			text-align: right;
			font-style: normal;
		}
		.content {
			flex: 1;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 14px;
			color: #333333;
			line-height: 20px;
			text-align: left;
			font-style: normal;
			display: flex;
			align-items: center;
			.text {
				margin-right: 15px;
				display: flex;
				align-items: center;
			}
			::v-deep .el-button {
				padding: 0;
			}
		}
	}
</style>
